<template>
   <HerinContainer  title="安全监测及告警" :delay="2"  :marTopnum="10" direction="Right">
    <template slot="content">
      <div class="Alarm-details">
        <div class="Alarm-detabox">
          <div class="detabox-item">
            <div class="item-top-box">
              <span class="box-title">瓦斯抽采</span>
              <span class="box-status" :style="{color: Object.is(wsInfo?.status,'正常') ? '#57FFAA' : '#EF303B'}">{{wsInfo?.status}}</span>
            </div>
            <div class="item-bottom-box">
              <div class="bottom-box">
                <span class="bottom-title">工况流量</span>
                <div>
                  <span class="bottom-num">{{wsInfo?.workingCondition}}</span>
                  <span class="bottom-cam">m³</span>
                </div>
              </div>
              <div class="bottom-box">
                <span class="bottom-title">标况纯流量</span>
                <div>
                  <span class="bottom-num">{{wsInfo?.standardCasePureFlow}}</span>
                  <span class="bottom-cam">m³</span>
                </div>
              </div>
            </div>
          </div>
          <div class="detabox-item">
            <div class="item-top-box">
              <span class="box-title">水文监测</span>
              <span class="box-status" :style="{color: Object.is(swInfo?.status,'正常') ? '#57FFAA' : '#EF303B'}">{{swInfo?.status}}</span>
            </div>
            <div class="item-bottom-box">
              <div class="bottom-box">
                <span class="bottom-title">瞬时涌水量</span>
                <div>
                  <span class="bottom-num">{{swInfo?.yongshui}}</span>
                  <span class="bottom-cam">m³/h</span>
                </div>
              </div>
              <div class="bottom-box">
                <span class="bottom-title">瞬时排水量</span>
                <div>
                  <span class="bottom-num">{{swInfo?.paishui}}</span>
                  <span class="bottom-cam">m³/h</span>
                </div>
              </div>
            </div>
          </div>
          <div class="detabox-item-2">
            <div class="item-2-box">
              <span class="box-title">顶板监测</span>
              <span class="box-status" :style="{color: Object.is(dbInfo?.status,'正常') ? '#57FFAA' : '#EF303B'}">{{dbInfo?.status}}</span>
            </div>
            <div class="item-2-box">
              <span class="box-title">应力监测</span>
              <span class="box-status" :style="{color: Object.is(swInfo?.status,'正常') ? '#57FFAA' : '#EF303B'}">{{swInfo?.status}}</span>
            </div>
          </div>
        </div>
        <div class="Security-details">
            <div v-for="(i) in Securitydeta" :key="i.index" class="Security">
              <img src="@/assets/img/dispath/alarm.png" alt=""><span>{{i.title}}</span><span style="color:#FFD101;font-weight:700;">{{i.num}}</span><span>次</span>
            </div>
        </div>
      </div>
      <!-- 图表 -->
      <div class="chosebox">
        <div class="chosetitle">
          <div v-if="indexa == 0">累计告警类型分析</div>
          <div v-else-if="indexa == 1">近30天告警趋势分析</div>
          <div v-else>告警记录</div>
        </div>
        <div class="buttonbox">
          <div
          v-for="(item,index) in tabList"
          :key="index"
          :class="{'active':activeIndex === index}"
          style="cursor:pointer"
          @click="changeView(index)">{{item}}</div>
        </div>
      </div>
      <div :style="{ height: 152/16 + 'rem' }" class="chartbox">
        <Type v-if="indexa == 0" :pieData="pieData"></Type>
        <Trend v-if="indexa == 1" :chartData="chartData"></Trend>
        <Record v-if="indexa == 2"></Record>
      </div>
    </template>
  </HerinContainer>
</template>

<script>
import HerinContainer from '@/components/HerinContainer.vue';
import Type from '@/views/dispatch/common/Type.vue';
import Trend from '@/views/dispatch/common/Trend.vue';
import Record from '@/views/dispatch/common/Record.vue';

import { getWS, queryAlarmHy, getDBJC, queryAlarmCount, queryAlarmTypeCount, queryAlarmLine30Count } from '@/api/item/dispatch/index';
export default {
  components: {
    HerinContainer,
    Type,
    Trend,
    Record
  },
  data() {
    return {
      activeIndex: 0,
      index: 0,
      indexa: 0,
      tabList: ['类型', '趋势', '记录'],
      Alarmdeta: [
        { name: '瓦斯抽采', tip1: '工况流量', num1: 0, tip2: '标况纯流量', num2: 0, danei: 'm³' },
        { name: '水文监测', tip1: '瞬时涌水量', num1: 0, tip2: '瞬时排水量', num2: 0, danei: 'm³/h' },
        { name: '矿压监测' },
        { name: '冲击地压监测' }],
      Securitydeta: [{ title: '今日告警', num: 0 }, { title: '累计告警', num: 0 }],
      alarmLists: [],
      pieData: [],
      chartData: [],
      selectOption: [],
      alarmRecordList: [],
      actionLoopTimer3S: null,
      actionLoopTimer1H: null,
      wsInfo: {},
      swInfo: {},
      dbInfo: {}
    };
  },
  computed: {
    colorStatus() {
      return function(status) {
        if (status === '正常') {
          return '#57FFAA';
        }
        if (status === '异常') {
          return '#EF303B';
        }
      };
    }
  },
  mounted() {
    this.startActionLoop3S(this.all3SFun);
  },
  beforeDestroy() {
    this.actionLoopTimer3S && clearInterval(this.actionLoopTimer3S);
    this.actionLoopTimer3S = null;
    this.actionLoopTimer1H && clearInterval(this.actionLoopTimer1H);
    this.actionLoopTimer1H = null;
  },
  methods: {
    all3SFun() {
      this.getWS();
      this.queryAlarmHy();
      this.getDBJC();
      this.queryAlarmCount();
      if (this.tabList[this.activeIndex] === '类型') {
        this.queryAlarmTypeCount();
      }
    },
    // 每隔 3S 循环查询数据
    startActionLoop3S(callback) {
      callback();
      this.actionLoopTimer3S = setInterval(callback, 3000);
    },
    // 每隔 1H 循环查询数据
    startActionLoop1H(callback) {
      callback();
      this.actionLoopTimer1H = setInterval(callback, 3600000);
    },
    async getWS() {
      const res = await getWS();
      if (res.data.code === 200) {
        this.wsInfo = res.data.data;
      }
    },
    async queryAlarmHy() {
      const res = await queryAlarmHy();
      if (res.data.code === 200) {
        this.swInfo = res.data.data;
      }
    },
    async getDBJC() {
      const res = await getDBJC();
      if (res.data.code === 200) {
        this.dbInfo = res.data.data;
      }
    },
    async queryAlarmCount() {
      const res = await queryAlarmCount();
      if (res.data.code === 200) {
        const resInfo = res.data.data;
        this.Securitydeta[0].num = resInfo.todayCount;
        this.Securitydeta[1].num = resInfo.totalCount;
      }
    },
    async queryAlarmTypeCount() {
      const res = await queryAlarmTypeCount();
      if (res.data.code === 200) {
        this.pieData = res.data.data.map(item => {
          return {
            x: item.key,
            y: item.value * 1
          };
        });
      }
    },
    async queryAlarmLine30Count() {
      const res = await queryAlarmLine30Count();
      if (res.data.code === 200) {
        this.chartData = res.data.data.map(item => {
          return {
            x: item.x,
            y: item.y * 1,
            s: item.s
          };
        });
      }
    },

    changeView(index) {
      this.activeIndex = index;
      this.index = index;
      this.indexa = index;
      if (this.tabList[this.activeIndex] === '类型') {
        this.queryAlarmTypeCount();
      }
      if (this.tabList[this.activeIndex] === '趋势') {
        this.startActionLoop1H(this.queryAlarmLine30Count);
      } else {
        this.actionLoopTimer1H && clearInterval(this.actionLoopTimer1H);
        this.actionLoopTimer1H = null;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
  .Alarm-details{
    // display: flex;
    // flex-wrap: wrap;
    // background: skyblue;
    .Alarm-detabox{
      .detabox-item{
        width: 20.625rem;
        height: 4.4375rem;
        border-radius: .25rem;
        margin-bottom: .3125rem;
        padding: .625rem;
        box-sizing: border-box;
        background-color: $itemBg;
        .item-top-box{
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 1rem;
          line-height: 1rem;
          margin-bottom: .625rem;
          .box-title{
            font-size: 1rem;
            color: #F8F8F8;
          }
          .box-status{
            height: .75rem;
            font-size: .75rem;
          }
        }
        .item-bottom-box{
          display: flex;
          align-items: center;
          justify-content: space-between;
          .bottom-box{
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-right: .625rem;
            width: 50%;
            height: 1.5rem;
            border-top: .0625rem solid #ADADAD;
            padding-top: .625rem;
            .bottom-title{
              font-size: .875rem;
              color:#E8E8E8;
            }
            .bottom-num{
              font-size: .875rem;
              color:#FFFFFF;
              margin-right: .3125rem;
            }
            .bottom-cam{
              font-size: .75rem;
              color:#8D8D8D;
            }
          }
          .bottom-box:last-child{
            padding-right: 0;
          }
        }
      }
      .detabox-item-2{
        width:20.625rem;
        // height: 2.875rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: .3125rem;
        .item-2-box{
          width: 10rem;
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-radius: .25rem;
          padding: .625rem;
          box-sizing: border-box;
          background-color: $itemBg;
          .box-title{
            font-size: 1rem;
            color: #F8F8F8;
          }
          .box-status{
            font-size: .75rem;
          }
        }
      }

    }
    .Security-details{
      height: 2.875rem;
      width: 20.625rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: .625rem;
      .Security{
        width: 10rem;
        height: 2.875rem;
        font-size: .875rem;
        background-color: $itemBg;
        border-radius: .25rem;
        color: #F8F8F8;
        padding: 0 .625rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        img{
          width: 1.25rem;
          height: 1.25rem;
        }
      }
    }
  }
  .chosebox{
    height: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .chosetitle{
      color: #ADADAD;
      font-size: .75rem;
    }
    .buttonbox{
      display: flex;
      align-items: center;
      margin: .625rem 0;
      div{
        font-size: .75rem;
        color: rgba(255, 255, 255, 100);
        margin:0 .1875rem;
        padding: 0 .3125rem;
        width: 2.125rem;
        text-align: center;
        height: 1rem;
        line-height: 1rem !important;
        background: rgba(232, 232, 232, 0.2);
      }
      .active{
        color: #02E4FF;
        background-color: rgba(2, 228, 255, 0.2);
      }
    }
  }
  .chartbox{
    display: flex;
    align-items: center;
  }
</style>
